<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'SignUp',
  data() {
    return {
      name: '',
      id: '',
      academies: ['信息与控制学院', '理学院', '机电学院', '建筑学院', '机电工程学院', '管理学院', '土木工程学院', '环境与市政工程学院', '建筑设备科学与工程学院', '材料科学与工程学院', '冶金工程学院', '资源工程学院', '文学院', '艺术学院', '马克思主义学院', '公共管理学院', '化学与化工学院', '体育学院', '安德学院', '未来技术学院'],
      academy: '',
      politicalLandscapes: ['群众', '共青团员', '共产党员'],
      politicalLandscape: '',
      genders: ['男', '女'],
      gender: ''
    }
  },
  methods: {
    onSubmit: function () {

    }
  }

}
</script>

<template>

  <el-row type="flex" justify="center">
    <el-form class="bg-login">
      <h2>注册</h2>
      <el-form-item class="item" label="姓名：">
        <el-input v-model="name" placeholder="请输入姓名"/>
      </el-form-item>

      <el-form-item class="item" label="学号：">
        <el-input v-model="id" placeholder="请输入学号"/>
      </el-form-item>

      <el-form-item class="item" label="学院：">
        <el-select v-model="academy" placeholder="请选择学院">
          <el-option v-for="a in academies"
                     :key="a"
                     :label="a"
                     :value="a">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="item" label="政治面貌：">
        <el-select v-model="politicalLandscape" placeholder="请选择政治面貌">
          <el-option v-for="a in politicalLandscapes"
                     :key="a"
                     :label="a"
                     :value="a">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="item" label="性别：">
        <el-select v-model="gender" placeholder="请选择性别">
          <el-option v-for="a in genders"
                     :key="a"
                     :label="a"
                     :value="a">
          </el-option>
        </el-select>

      </el-form-item>

      <el-form-item class="item">
        <el-button class="Submit" type="primary" @click="onSubmit">注册</el-button>
      </el-form-item>
    </el-form>
  </el-row>


</template>

<style scoped>

.bg-login {

  border-radius: 10px;
  margin: auto;

  overflow: hidden;
  padding-top: 5px;

  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

.item {
  padding-left: 10px;
  padding-right: 10px;;
}

.Submit {
  margin: 0 auto;
}
h2{
  margin-top: 20px;
  margin-bottom: 20px;
  color:#1d1d1f;
  text-align: center;
  animation: fade-in 1s ease-in-out;
}
</style>